<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #nav{
            align-self: center;
            position: relative;
            border: 2px solid green;
            width: 500px;
            height: 600px;

        }

        #nav #menu{

        }



        #nav #menu li{
            list-style: none;
            float: left;
            background-color: #a4aebd;
            height: 15px;
            width: 15px;
            margin: 50px;
            border-radius: 50%;



        }
        .clear:after{
            display: none;
            height: 0;
            content: '';
            clear: both;
        }




    </style>

</head>
<body>

<div id="nav">
    <img src="#" height="500px">
    <ul id="menu" class="clear">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

</body>
</html>